<template>
  <div v-if="cdata">
    <v-chart
      :force-fit="true"
      :height="height"
      :data="data"
      :scale="scale"
      padding="auto"
    >
      <v-tooltip />
      <v-axis />
      <!-- <v-legend /> -->
      <v-line position="month*temperature" color="city" />
      <v-point
        position="month*temperature"
        color="city"
        :size="4"
        :v-style="style"
        :shape="'circle'"
      />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require("@antv/data-set");

export default {
  props: {
    cdata: {
      type: Object,
      default() {
        return null;
      }
    }
  },
  watch: {
    cdata: {
      immediate: true,
      deep: true,
      handler(cdata) {
        if (!cdata || !cdata[10001]) return;
        const sourceData = [
          { month: "1月", 男: cdata[10008][0].value },
          { month: "2月", 男: cdata[10008][1].value },
          { month: "3月", 男: cdata[10008][2].value },
          { month: "4月", 男: cdata[10008][3].value },
          { month: "5月", 男: cdata[10008][4].value },
          { month: "6月", 男: cdata[10008][5].value }
        ];

        const dv = new DataSet.View().source(sourceData);
        dv.transform({
          type: "fold",
          fields: ["男"],
          key: "city",
          value: "temperature"
        });
        const data = dv.rows;

        const scale = [
          {
            dataKey: "month",
            min: 0,
            max: 1
          }
        ];

        this.data = data;
        this.scale = scale;
      }
    }
  },
  data() {
    return {
      data: [],
      scale: [],
      height: (window.innerWidth / 1920) * 300,
      style: { stroke: "#fff", lineWidth: 1 }
    };
  }
};
</script>
